---
title: Toggle Button
description: A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
component: true
links:
  doc: https://react-spectrum.adobe.com/react-aria/ToggleButton.html
---

Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so React Aria implements it using ARIA attributes.

<ComponentPreview name="toggle-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Copy & Paste</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<PackageManagerTabs>
  <PackageManagerContent value="npm">
    ```bash
    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/toggle
    ```
  </PackageManagerContent>
  <PackageManagerContent value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/toggle
    ```

  </PackageManagerContent>
  <PackageManagerContent value="bun">
    ```bash
    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/toggle
    ```
  </PackageManagerContent>
  <PackageManagerContent value="yarn">
    ```bash 
    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/toggle
    ```
  </PackageManagerContent>
</PackageManagerTabs>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="toggle" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Default

<ComponentPreview name="toggle-demo" />

### Outline

<ComponentPreview name="toggle-outline" />

### With Text

<ComponentPreview name="toggle-with-text" />

### Small

<ComponentPreview name="toggle-sm" />

### Large

<ComponentPreview name="toggle-lg" />

### Disabled

<ComponentPreview name="toggle-disabled" />
